import { View, Text, Image } from '@tarojs/components'
import ArrowRight from '../images/路径.png'
import LgCheckbox from '../../checkbox'
import { heightLight } from '../myUtils'
import './index.scss'



const Row2 = (props) => {

    const { rightIcon, data, onClick } = props

    return (
        <View className='concat_row' onClick={() => onClick(data)}>
            <Image className='concat_row_left' src={data.icon} />
            <View className='concat_row_text'>{data?.moduleName}</View>
            <View className='concat_row_right' >
                <Image className='arrow_right' src={rightIcon} />
            </View>
        </View>
    )
}

const Row3 = (props) => {
    const { data, key, del } = props

    return (
        <View className='chat_group_row' key={key}>
            <View className='avatar' style={{ backgroundImage: `url(${data.avatar || data.avatarPath || data.photoPath})` }}></View>
            <View className='row_right'>
                <View className='name'>
                    <View className='userName'>{data?.userName || data?.groupName || '--'}</View>
                    <View className='count' style={{ color: '#999999' }}>{`(${data?.userId || data?.totalCount || 0})`}</View>
                </View>
                <View
                  className='icon_area'
                >
                    <View className='remove_item' onClick={() => del(data)}>移除</View>
                </View>
            </View>
        </View>
    )
}

const Row4 = (props) => {
    const { data,index, key, toChat, keyword, choose, onClick } = props


    if (data?.userId) {
        return (
            <View className='user_choose_row' key={data.id}>
                <LgCheckbox
                  type='B'
                  value={data?.hasCho}
                  onClick={(value) => { typeof choose === 'function' && choose(data, value,index) }}
                />
                <View className='row_right'>
                    <View className='name'>
                        <View className='avatar'
                          style={{ backgroundImage: `url(${data?.avatarPath || data?.photoPath})` }}
                        ></View>
                        <View className='userName' dangerouslySetInnerHTML={{ __html: keyword ? heightLight(data?.userName, keyword) : data?.userName }}></View>
                        <View className='userId'>{`(${data?.userId || '--'})`}</View>
                    </View>
                </View>
            </View>
        )
    } else {
        return (
            <View className='group_row' key={data.id}>
                <LgCheckbox
                  type='B'
                  value={data?.hasCho}
                  onClick={(value) => {typeof choose === 'function' && choose(data, value,index) }}
                />
                <View className='row_right'>
                    <View className='name'>
                        <View className='avatar' style={{ backgroundImage: `url(${data.avatar})` }}></View>
                        <View className='userName'>{data?.groupName || '--'}</View>
                        <View className='count'>{`(${data?.totalCount || 0}人)`}</View>
                    </View>
                    <View className='more' onClick={(e) => { typeof onClick === 'function'  && onClick(data,index) }}>
                        <Image src={ArrowRight} className='forward_icon' />
                    </View>
                </View>
            </View>
        )
    }
}


//row1 用户行 row2 首页模块行 row3删除选择行 row4选择对象行
function App(props) {
   if (props.type == 'B') {
        return <Row2 {...props} />
    } else if (props.type == 'C') {
        return <Row3 {...props} />
    } else if (props.type == 'D') {
        return <Row4 {...props} />
    } else {
        return <Row2 {...props} />
    }

}
export default App